<template>
  <ve-card
    title="会员信息"
    :sub-title="record.memberStatusName"
    :customSubStyle="getSubStyle(record)"
    @tap="handleBtn('detail', record)"
    :type="getCardType(record)"
  >
    <ve-cell label="姓名">
      <view class="memberName-text">{{ record.memberName || '-' }}</view>
      <view class="member-label" v-if="record.memberLabel && record.memberLabel != 1" :style="tagBackgroundColor(record)">{{
        record.memberLabelName
      }}</view>
    </ve-cell>
    <ve-cell label="手机号">{{ record.phone || '-' }}</ve-cell>
    <ve-cell label="企业">{{ record.clientName || '-' }}</ve-cell>
    <ve-cell label="身份认证">{{ record.identityAuthStatusName || '-' }}</ve-cell>
    <ve-cell label="电子合同认证状态">
      <text :class="'contract-status_'+record.ecAuthenticationStatus">{{ record.ecAuthenticationStatusName }}</text>
    </ve-cell>
    <view v-if="record.ecAuthenticationStatus == 0" class="status_reason c1 fw400 fs30">
      <view>原因：</view>
      <view v-if="record.authenticationFailedReason">{{ record.authenticationFailedReason || '-' }}</view>
    </view>
    <ve-cell label="累计下单">
      <view>
        <view class="block">自驾短租 {{ record.shortOrderNum || record.shortOrderNum == 0 ? record.shortOrderNum : '-' }} 单</view>
        <view class="block">自驾长租 {{ record.longOrderNum || record.longOrderNum == 0 ? record.longOrderNum : '-' }} 单</view>
      </view>
    </ve-cell>
    <ve-cell label="累计消费">
      <view>
        <view class="block">自驾短租 {{ record.shortOrderAmount || record.shortOrderAmount == 0 ? record.shortOrderAmount : '-' }} 元</view>
        <view class="block">自驾长租 {{ record.longOrderAmount || record.longOrderAmount == 0 ? record.longOrderAmount : '-' }} 元</view>
      </view>
    </ve-cell>

    <ve-operate-list :operates="operates" :record="record" />
  </ve-card>
</template>

<script setup>
  import { ref } from 'vue'
  defineProps({
    record: {
      type: Object,
      default: () => {},
    },
  })

  const operates = ref([
    {
      label: '编辑',
      permission: 'svmsapp:member-manage-member.edit',
      // show: (record) => record.inspectionStatus == 0 || record.inspectionStatus == 2,
      method: (record) => {
        uni.navigateTo({
          url: `/pages/market/memberManage/member/components/add?id=${record.id}`,
        })
      },
    },
    {
      label: '会员标签',
      permission: 'svmsapp:member-manage-member.label',
      // show: (record) => record.inspectionStatus == 0,
      method: (record) => {
        uni.navigateTo({
          url: `/pages/market/memberManage/member/components/label?id=${record.id}`,
        })
      },
    },
    {
      label: '拉黑',
      permission: 'svmsapp:member-manage-member.block',
      show: (record) => record.memberStatus == 0,
      method: (record) => {
        uni.navigateTo({
          url: `/pages/market/memberManage/member/components/block?id=${record.id}`,
        })
      },
    },
    {
      label: '恢复',
      permission: 'svmsapp:member-manage-member.restore',
      show: (record) => record.memberStatus == 1,
      method: (record) => {
        uni.navigateTo({
          url: `/pages/market/memberManage/member/components/restore?id=${record.id}`,
        })
      },
    },
  ])

  const handleBtn = (way, record) => {
    console.log(way)
    let path
    if (way == 'detail') {
      path = 'detail/index'
    }
    if (way == 'edit') {
      path = 'components/add'
    }
    if (way == 'label') {
      path = 'components/label'
    }
    if (way == 'block') {
      path = 'components/block'
    }
    if (way == 'restore') {
      path = 'components/restore'
    }
    const url = `/pages/market/memberManage/member/${path}?id=${record.id}`
    uni.navigateTo({
      url,
    })
  }

  /**
   * 1.普通
   * 2.优质
   * 3.风险
   *
   */
  const tagBackgroundColor = (item) => {
    if (item) {
      if (item.memberLabel == 3) {
        return { background: '#FFECE8', color: '#F53F3F' }
      } else if (item.memberLabel == 2) {
        return {
          background: '#E8FFEA',
          color: '#00B42A',
        }
      }
      return {}
    }
  }

  const getSubStyle = (item) => {
    if (item) {
      if (item.memberStatus == 0) {
        return { color: '#3072F6' }
      } else if (item.memberStatus == 1) {
        return {
          color: '#8491A8',
        }
      }
      return {}
    }
  }

  const getCardType = (record) => {
    let result = 'gray'
    switch (record.memberStatus) {
      case 0:
        result = 'blue'
        break
      case 1:
        result = 'gray'
        break
    }
    return result
  }
</script>

<style lang="less" scoped>
  .member-label {
    display: inline-block;
    height: 40rpx;
    border-radius: 792rpx 792rpx 792rpx 792rpx;
    opacity: 1;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    margin-left: 8rpx;
    padding: 0 16rpx;
    line-height: 40rpx;
  }

  .card-footer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .ve-button + .ve-button {
      margin-left: 24rpx;
    }
  }
  .memberName-text {
    max-width: 264rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .block {
    display: block;
  }
  .contract-status_-1{
    color: #F53F3F;
  }
  .contract-status_0{
    color: #F53F3F;
  }
  .contract-status_1{
    color: #00B42A;
  }
  .contract-status_2{
    color: #FF7D00;
  }
  .status_reason{
    background-color: #F7F8FA;
    padding: 24rpx;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    view:nth-child(1){
      min-width: 80rpx;
    }
    view:nth-child(2){
      flex: 1;
    }
  }
</style>
